<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>
  <div class="button-container ">
    <button @click="clearLine">清除line</button>
    <button @click="startDraw">开始绘图</button>
    <button @click="stopDraw">停止绘图</button>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js';
import VectorSource from 'ol/source/Vector.js'
import VectorLayer from 'ol/layer/Vector.js'
import Style from 'ol/style/Style.js'
import Icon from 'ol/style/Icon.js'
import CircleStyle from 'ol/style/Circle.js'
import Fill from 'ol/style/Fill.js'
import Text from 'ol/style/Text.js'
import Stroke from 'ol/style/Stroke.js'
import { LineString } from 'ol/geom';
import Select from 'ol/interaction/Select.js'
import GeoJSON from 'ol/format/GeoJSON.js'
import Draw from 'ol/interaction/Draw.js'
import { click } from 'ol/events/condition';
let map = null

onMounted(async () => {
  map = new Map({
    target: 'openlayersContainer'
  });
  map.setView(view)
  map.addLayer(gaodeLayer);
  map.addLayer(vectorLayer)

  map.addLayer(lineLayer)
  map.addLayer(iconVectorLayer);
  map.addInteraction(select)

})

const view = new View({
  center: [114.3165, 30.5264],
  zoom: 5,
  maxZoom: 18,
  minZoom: 2,
  projection: 'EPSG:4326'
})
// 高德地图
const gaodeSourse = new XYZ({
  // 高德地图
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
})
const gaodeLayer = new TileLayer({
  source: gaodeSourse
})

const vectorSource = new VectorSource({
  url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
  format: new GeoJSON()
})

const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: new Style({
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.8)'
    }),
    stroke: new Stroke({
      color: '#ffcc33',
      width: 2
    }),

  })
})
//开始绘图
const startDraw = () => {
  map.addInteraction(drawLine);
};
// 停止绘图
const stopDraw = () => {
  map.removeInteraction(drawLine);
};


const lineVectorSource = new VectorSource({})
const lineLayer = new VectorLayer({
  source: lineVectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 6
    })
  })
})

const drawLine = new Draw({
  type: 'LineString',
  source: lineVectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 2
    }),
  }),
})
drawLine.on('drawend', function (e) {
  const feature = e.feature
  feature.setId(generateUniqueID())
  const coordinates = feature.getGeometry().getCoordinates()
  createPoint(feature.getId(), coordinates[0])
  // const lineString = new LineString(coordinates)
  // lineVectorSource.addFeature(new Feature(lineString))
  stopDraw()
})
const clearLine = () => {
  lineVectorSource.clear()
}

// 2.创建矢量数据源
const iconVectorSource = new VectorSource();
// 3.创建矢量图层
const iconVectorLayer = new VectorLayer({
  source: iconVectorSource,
});
const generateUniqueID = () => {
  const timestamp = new Date().getTime();
  const randomNum = Math.floor(Math.random() * 9000) + 1000; // 生成一个 1000-9999 的随机数
  const uniqueID = (timestamp % 100000) + '' + randomNum; // 结合时间戳和随机数生成唯一 ID
  return uniqueID.substring(0, 5); // 取前 5 位
}

const createPoint = (id, points) => {
  const feature = new Feature({
    geometry: new Point(points),
  })
  feature.setId(id)
  feature.setStyle(new Style({
    image: new Icon({
      anchor: [0.5, 1],
      src: require('./assets/logo.png'),
    }),
  }))
  iconVectorSource.addFeature(feature);
}


const select = new Select({
  condition: click,
  filter: function (feature, layer) {
    return layer === iconVectorLayer
  }
}
)
select.on('select', function (e) {
  const features = e.selected
  if (features.length) {
    console.log(features[0].getId())
    removeFeature(features[0].getId())
  }
})

const removeFeature = (id) => {
  console.log(id)
  if (id) {
    const feature = iconVectorSource.getFeatureById(id)
    const linefeature = lineVectorSource.getFeatureById(id)
    iconVectorSource.removeFeature(feature)
    lineVectorSource.removeFeature(linefeature)
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}

.button-container {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
</style>
